// 下面总价 计算后
<template>
  <div class="container">
    <div>
      <p>
        <span>
          <span>{{types}}</span>类 共
          <span>{{num}}</span>件商品
        </span>
        <i>总计：</i>
        <bdi>￥{{TotalPrice}}</bdi>
      </p>
      <!-- 运费 -->
      <p>
        <i>运费：</i>
        <bdi>￥{{freight}}</bdi>
      </p>
      <!-- <p>
        <i>优惠券：</i> 
        <bdi>-￥406.90</bdi>
      </p>-->
      <!-- <p>
        <i>线上支付优惠：</i>
        <bdi>-￥{{PaymentPreferences}}</bdi>
      </p>-->
      <p>
        <i>寄送至：</i>
        <span>{{defaultAddress}}</span>
      </p>
      <p>
        <i>收货人：</i>
        <span>{{changesUser}}</span>
      </p>
    </div>

    <p>
      <i>
        实付金额：
        <bdi>￥{{TotalPaidPrice}}</bdi>
      </i>
      <el-button @click="placeOrder" size="mini" type="danger" v-if="!disabled">提交订单</el-button>
    </p>
  </div>
</template>
<script>
export default {
  name: "totalPrice",
  props: ["defaultAddress", "changesUser"],
  data() {
    return {
      types: 0,
      num: 0,
      TotalPrice: 0, // 总价
      PaymentPreferences: 0, // 优惠
      disabled: true
    };
  },
  methods: {
    // 提交订单
    async placeOrder() {
      this.$emit("placeOrder");
    },
    // 获取价格
    getPrice() {
      let PriceNum = this.$store.state.SettlementData;
      this.types = PriceNum.length;
      let changeNum = 0,
        changePrice = 0;
      PriceNum.forEach(element => {
        changeNum += element.num;
        changePrice += element.num * element.selling_price;
      });
      this.num = changeNum;
      this.TotalPrice = changePrice.toFixed(2);
    }
  },
  computed: {
    TotalPaidPrice() {
      let Price = this.TotalPrice - this.PaymentPreferences + this.freight;
      return Price.toFixed(2);
    },
    freight() {
      console.log(this.defaultAddress == "");
      console.log(this.$store.state.getFreight);
      if (this.defaultAddress == "" || this.changesUser == ""  ||this.$store.state.getindex == 1) {
        this.$store.commit("getFreight", 0);
        return this.$store.state.getFreight;
      } else {
        return this.$store.state.getFreight;
      }
    }
  },
  mounted() {
    this.getPrice();
    setTimeout(() => {
      this.disabled = false;
    }, 3000);
  },
  updated() {
    // console.log(this.TotalPaidPrice)
    this.$emit("TotalPriceData", this.TotalPaidPrice, this.freight);
    // console.log(this.changesUser)
  }
};
</script>
<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: auto;
  div:first-child {
    width: 1168px;
    margin-top: 20px;
    border-top: 3px solid #ff0000;
    border-left: 1px solid #ff0000;
    border-right: 1px solid #ff0000;
    border-bottom: 1px solid #ff0000;
    text-align: right;
    padding: 15px;
    line-height: 30px;
    p {
      line-height: 30px;
      span {
        color: #8e8e8e;
        font-size: 14px;
      }
      i {
        display: inline-block;
        margin-left: 40px;
        color: #2c2c2c;
        font-size: 14px;
        font-weight: bold;
      }
      bdi {
        display: inline-block;
        width: 120px;
        color: #ff0000;
        font-size: 20px;
      }
    }
  }
  p {
    text-align: right;
    color: #ff0000;
    line-height: 36px;
    i {
      font-size: 14px;
      bdi {
        font-size: 18px;
        font-weight: bold;
        margin-right: 20px;
      }
    }
  }
}
</style>
